<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>Psychology Manage System</title>

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/img/favicon.png">

    <link rel="stylesheet" href="assets/css/element.css">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">

    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">


    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <script src="assets/util/localStorageUtil.js"></script>
    <script src="assets/util/request.js"></script>
    <script src="assets/util/common.js"></script>
    <script src="assets/js/element.js"></script>
    <script src="assets/util/jsencrypt.js"></script>


    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.min.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->

</head>
<body>

<!-- Main Wrapper -->
<div class="main-wrapper" id="profile" v-show="isRouterAlive">

    <!-- Header -->
    <div class="header">

        <!-- Logo -->
        <div class="header-left">
            <a href="profile.html" class="logo">
                <img src="assets/img/logo.png" alt="Logo">
            </a>
            <a href="profile.html" class="logo logo-small">
                <img src="assets/img/logo-small.png" alt="Logo" width="30" height="30">
            </a>
        </div>
        <!-- /Logo -->

        <!-- Sidebar Toggle -->
        <a href="javascript:void(0);" id="toggle_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Sidebar Toggle -->

        <!-- Mobile Menu Toggle -->
        <a class="mobile_btn" id="mobile_btn">
            <i class="fas fa-bars"></i>
        </a>
        <!-- /Mobile Menu Toggle -->

        <!-- Header Menu -->
        <ul class="nav user-menu">

            <!-- Flag -->
            <li class="nav-item dropdown has-arrow flag-nav">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button">
                    <img src="assets/img/flags/zh.png" alt="" height="20"> <span>简体中文</span>
                </a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a href="javascript:void(0);" class="dropdown-item">
                        <img src="assets/img/flags/zh.png" alt="" height="16"> 简体中文
                    </a>
                </div>
            </li>
            <!-- /Flag -->

            <!-- User Menu -->
            <li class="nav-item dropdown has-arrow main-drop">
                <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
							<span class="user-img">
								<img :src="userinfo.figureUrl==='' ? 'assets/img/logo-small.png': userinfo.figureUrl " alt="">
								<span class="status online"></span>
							</span>
                    <span v-html="userinfo.nickname"></span>
                </a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="profile.html"><i data-feather="user" class="mr-1"></i> 个人中心</a>
                    <button class="dropdown-item" onclick="logout()"><i data-feather="log-out" class="mr-1"></i> 注销</button>
                </div>
            </li>
            <!-- /User Menu -->

        </ul>
        <!-- /Header Menu -->

    </div>
    <!-- /Header -->

    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-inner slimscroll">
            <div id="sidebar-menu" class="sidebar-menu" >
                <ul id="sidebarMenu">
                </ul>
            </div>
        </div>
    </div>
    <!-- /Sidebar -->

    <!-- Page Wrapper -->
    <div class="page-wrapper">
        <div class="content container-fluid">

            <div class="profile-cover">
                <div class="profile-cover-wrap">
                    <img class="profile-cover-img" :src="userinfo.figureUrl" alt="Profile Cover">
                </div>
            </div>

            <div class="text-center mb-5">
                <div>
                    <label class="avatar avatar-xxl profile-cover-avatar" for="avatar_upload">
                        <img class="avatar-img" :src="userinfo.figureUrl" alt="Profile Image">
                        <input type="file" name="file" ref="file" v-on:change="uploadFigureUrl" id="avatar_upload">
                        <span class="avatar-edit">
							<i data-feather="edit-2" class="avatar-uploader-icon shadow-soft"></i>
						</span>
                    </label>
                </div>
                <div style="margin-top: 20px">
                    <h2>{{userinfo.nickname}} <i class="fas fa-certificate text-primary small" data-toggle="tooltip" data-placement="top" title="" data-original-title="昵称"></i></h2>
                </div>

            </div>


            <div class="row">
                <div class="col-xl-3 col-md-4">

                    <!-- Settings Menu -->
                    <div class="widget settings-menu">
                        <ul>
                            <li class="nav-item">
                                <a v-on:click="changeDisplayCard('basicInfo',1)" type="button"  :class="{active: cardActive===1}">
                                    <i class="far fa-user"></i> <span>基本信息</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a v-on:click="changeDisplayCard('examRecord',2)" type="button"  :class="{active: cardActive===2}" >
                                    <i class="far fa-list-alt"></i> <span>答题记录</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a v-on:click="changeDisplayCard('accountSetting',3)" type="button"  :class="{active: cardActive===3}">
                                    <i class="fas fa-unlock-alt"></i> <span>账号设置</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- /Settings Menu -->

                </div>

                <div class="col-xl-9 col-md-8">

                    <div class="card" id="basicInfo" v-show="displayCard.basicInfo">
                        <div class="card-header form-line">
                            <span class="card-title" style="font-size: 20px">基本信息</span>
                            <span  style="float: right;font-size: 15px;"><a href="#" v-on:click="enableEdit">{{editOrDisable}}</a></span>
                        </div>
                        <div class="card-body">
                            <!-- Form -->
                            <el-form :model="userinfo" :rules="rules" ref="ruleForm">
                                <div class="row">
                                    <label class="col-sm-3 col-form-label input-label">昵称</label>
                                    <div class="col-sm-9">
                                        <el-form-item prop="nickname">
                                            <el-input type="text" style="width: 100%" id="name" placeholder="昵称" v-bind:disabled="disabled" v-model="userinfo.nickname"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>

                                <div class="row ">
                                    <label class="col-sm-3 col-form-label input-label">性别 <span class="text-muted">(可选)</span></label>
                                    <div class="col-sm-9">
                                        <el-form-item prop="sex">
                                            <el-select v-model="userinfo.sex" placeholder="请选择" style="width: 100%" v-bind:disabled="disabled"  clearable>
                                                <el-option label="男" :value="Number(10)"></el-option>
                                                <el-option label="女" :value="Number(20)"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </div>

                                <div class="row">
                                    <label class="col-sm-3 col-form-label input-label">生日 <span class="text-muted">(可选)</span></label>
                                    <div class="col-sm-9">
                                        <el-form-item prop="birthDate">
                                            <el-date-picker
                                                    style="width: 100%"
                                                    v-model="userinfo.birthDate"
                                                    type="date"
                                                    v-bind:disabled="disabled"
                                                    value-format="yyyy-MM-dd"
                                                    placeholder="选择日期">
                                            </el-date-picker>
                                        </el-form-item>
                                    </div>
                                </div>


                                <div class="row ">
                                    <label class="col-sm-3 col-form-label input-label">手机号 <span class="text-muted">(可选)</span></label>
                                    <div class="col-sm-9">
                                        <el-form-item prop="phone">
                                            <el-input type="text" style="width: 100%" placeholder="手机号" v-bind:disabled="disabled"  v-model="userinfo.phone"></el-input>
                                        </el-form-item>
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <label class="col-sm-3 col-form-label input-label">邮箱</label>
                                    <div class="col-sm-9">
                                        <el-input type="email" style="width: 100%" id="email" placeholder="邮箱" disabled="disabled"  v-model="userinfo.email"></el-input>
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <label class="col-sm-3 col-form-label input-label">创建日期 </label>
                                    <div class="col-sm-9">
                                        <el-date-picker
                                                style="width: 100%"
                                                v-model="userinfo.createDate"
                                                type="date"
                                                disabled="disabled"
                                                value-format="yyyy-MM-dd"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <label class="col-sm-3 col-form-label input-label">最近登录日期 </label>
                                    <div class="col-sm-9">
                                        <el-date-picker
                                                style="width: 100%"
                                                v-model="userinfo.lastUserLoginDate"
                                                type="date"
                                                disabled="disabled"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </div>
                                <div class="row form-group">
                                    <label class="col-sm-3 col-form-label input-label">最近更改密码日期 </label>
                                    <div class="col-sm-9">
                                        <el-date-picker
                                                style="width: 100%"
                                                v-model="userinfo.lastPasswordRestDate"
                                                type="date"
                                                disabled="disabled"
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                placeholder="选择日期">
                                        </el-date-picker>
                                    </div>
                                </div>

                                <div class="row form-group">
                                    <label  class="col-sm-3 col-form-label input-label">用户状态 </label>
                                    <div class="col-sm-9">
                                        <el-select v-model="userinfo.userStatus+''" placeholder="请选择" style="width: 100%" disabled="disabled" clearable>
                                            <el-option label="正常" value=1></el-option>
                                            <el-option label="冻结" value=0></el-option>
                                        </el-select>
                                    </div>
                                </div>

                                <div class="text-right">
                                    <button type="button" v-bind:disabled="disabled" class="btn btn-primary" v-on:click="onSubmit">保 存</button>
                                </div>
                            </el-form>
                            <!-- /Form -->

                        </div>
                    </div>
                    <div class="card" id="examRecord" v-show="displayCard.examRecord">
                        <div class="card-header form-line">
                            <span class="card-title" style="font-size: 20px">答题记录</span>
                        </div>
                        <div class="card-body">
                            <el-table
                                    v-loading="loading"
                                    :data="recordList"
                                    style="width: 100%">
                                <el-table-column fixed label="序号"
                                                 width="50" align="center">
                                    <template scope="scope"><span>{{scope.$index+(pageNum - 1) * pageSize + 1}} </span></template>
                                </el-table-column>
                                <el-table-column label="量表名称">
                                    <template scope="scope">
                                        <a href="#" v-on:click="skipDetail(scope.row.recordId)" class="user-a">{{scope.row.scaleName}} </a>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="scaleTypeName"
                                        label="量表类型"
                                >
                                </el-table-column>
                                <el-table-column
                                        prop="useTime"
                                        label="耗时"
                                >
                                </el-table-column>

                                <el-table-column
                                        prop="createDate"
                                        label="创建时间"
                                >
                                </el-table-column>

                            </el-table>
                            <div class="block">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageNum"
                                        :page-sizes="pageSizes"
                                        :page-size="pageSize"
                                        :page-count="9"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="totalSize">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                    <div class="card" id="accountSetting" v-show="displayCard.accountSetting">
                        <div class="card-header form-line">
                            <span class="card-title" style="font-size: 20px">账户设置</span>
                        </div>
                        <div class="card-body">
                            <div>
                                <span class="card-title" style="font-size: 20px"><i class="fas fa-unlock-alt"></i> <span>密码</span></span>
                                <span  style="float: right;font-size: 20px;" v-on:click="displayPasswordFormChange"><a href="#" >修改密码</a></span>
                                <el-form :rules="rules" :model="passwordForm" style="margin-top: 10px" v-show="displayPasswordForm">
                                    <el-form-item prop="oldPassword" >
                                        <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="newPassword">
                                        <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" ></el-input>
                                    </el-form-item>
                                    <el-button type="primary" v-on:click="changePassword">提 交</el-button>
                                </el-form>

                            </div>
                            <div style="margin-top: 20px">
                                <span class="card-title" style="font-size: 20px"><i class="fas fa-mail-bulk"></i> <span>邮箱</span></span>
                                <span  style="float: right;font-size: 20px;"><a href="#" >修改邮箱</a></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /Page Wrapper -->

</div>
<!-- /Main Wrapper -->

<!-- jQuery -->
<script src="assets/js/jquery-3.5.1.min.js"></script>

<!-- Bootstrap Core JS -->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>

<!-- Feather Icon JS -->
<script src="assets/js/feather.min.js"></script>

<!-- Slimscroll JS -->
<script src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>

<!-- Custom JS -->
<script src="assets/js/script.js"></script>

</body>

<script>

    let storage = new Storage();

    var profile = new Vue({
        el: '#profile',
        data() {

            const checkPhone = (rule,value,callback) =>{
                if(value !== storage.getItem("userinfo").phone+'' && value!==undefined){
                    const pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                    if(!pattern.test(value)){
                        callback(new Error("请输入正确手机号"))
                    }else{
                        callback();
                    }
                }else {
                    callback();
                }
            };
            const checkNickName = (rule,value,callback) =>{
                if(value !== storage.getItem("userinfo").nickname+''){
                    if(value === null || value ===''){
                        callback(new Error("昵称不能为空"))
                    }else if(value.length > 25){
                        callback(new Error("昵称长度太长，小于25位"))
                    }else{
                        callback();
                    }
                }else {
                    callback();
                }
            };

            return {
                //初始页
                isRouterAlive: false,
                userinfo: {},
                recordList: [],
                encrypt: null,
                activePage: '/profile.html',
                loading: false,
                disabled: true,
                editOrDisable: "编 辑",
                cardActive: 1,
                pageNum: 1,
                totalSize: 0,
                pageSize: 10,
                pageSizes: [2,3,5,10,20,50,100],
                displayCard:{
                    basicInfo: true,
                    examRecord: false,
                    accountSetting: false
                },
                displayPasswordForm: false,

                passwordForm:{
                  oldPassword: '',
                  newPassword: ''
                },
                rules: {
                    phone: [
                        {validator: checkPhone,trigger: 'change'}
                    ],
                    nickname: [
                        {validator: checkNickName,trigger: 'change'}
                    ],
                    oldPassword: [
                        {required: true,message:"请输入原密码",trigger: 'blur'},
                        {min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
                    ],
                    newPassword: [
                        {required: true,message:"请输入新密码",trigger: 'blur'},
                        {min: 6,max: 30,message: '密码长度6-30位',trigger: 'blur'},
                    ]
                }
            }
        },
        methods: {

            async getUserInfo() {
                //设置用户信息
                if (storage.getItem("userinfo") != null) {
                    this.isRouterAlive = true;
                    this.userinfo = storage.getItem("userinfo");
                    initMenu(storage.getItem("routeMap"), this.activePage)
                } else {
                    await service.get("/user/getUserInfo").then(res => {
                        storage.setItem({
                            name: "userinfo",
                            value: res.data.userinfo
                        })
                        storage.setItem({
                            name: "routeMap",
                            value: res.data.routeMap
                        })
                        this.isRouterAlive = false;
                        window.location.reload();
                        return;
                    });
                }
                intThisPoint(this);
                getPublicKey();
                this.getExamRecordList(this.pageNum, this.pageSize, false)
            },

            uploadFigureUrl(){
                console.log(1);
                let file = $(this.$el).find('#avatar_upload')[0].files[0];
                let formData = new FormData();
                formData.append('file',file);
                service({
                    method: "post",
                    headers: {'Content-Type':'multipart/form-data'},
                    url: "/user/updateCurrentFigureUrl",
                    data: formData
                }).then(res => {
                    if(res.data!=null && res.data!==''){
                        this.userinfo.figureUrl = res.data;
                        storage.setItem({
                            name: "userinfo",
                            value: this.userinfo
                        })
                    }
                })
            },
            onSubmit(){
                this.$refs['ruleForm'].validate(valid =>{
                    if(valid){
                        const user = {
                            nickname: this.userinfo.nickname,
                            birthDate: this.userinfo.birthDate,
                            sex: this.userinfo.sex,
                            phone: this.userinfo.phone
                        };
                        service({
                            method: "post",
                            url: "/user/updateCurrentUserInfo",
                            data: user
                        }).then(res=>{
                            if(res.data){
                                storage.setItem({
                                    name: "userinfo",
                                    value: this.userinfo
                                })
                                this.$message({type:"success",message: "更新用户信息成功"})
                                this.enableEdit();
                            }
                        })
                    }else{
                        this.$message({message:"数据格式不正确",type:"error"})
                    }
                })
            },

            handleSizeChange(size) {
                this.pageSize = size;
                this.getExamRecordList(this.pageNum,this.pageSize,true)
            },
            handleCurrentChange(currentPage) {
                this.pageNum = currentPage
                this.getExamRecordList(this.pageNum,this.pageSize,true)
            },
            getExamRecordList(pageNum, pageSize,isForm){
                var data = {
                    pageNum: pageNum,
                    pageSize: pageSize
                };

                if(isForm){
                    data.pageNum = pageNum;
                    data.pageSize = pageSize
                }
                service({
                    method: 'post',
                    url: "/exam/getCurrentUserRecord",
                    data: data
                }).then(res=>{
                    this.recordList = res.data.dataList;
                    this.totalSize = res.data.totalSize
                })
            },

            changeDisplayCard(card,act){
                for(item in this.displayCard){
                    this.displayCard[item] = item === card;
                }
                this.cardActive = act;
            },

            enableEdit(){
                if(this.disabled){
                    this.editOrDisable = "返 回"
                    this.disabled = false;
                }else{
                    this.editOrDisable = "编 辑"
                    this.disabled = true;
                    this.userinfo = storage.getItem("userinfo");
                }
            },
            skipDetail(recordId){
                window.location.href="/examination-record-detail.html?recordId="+recordId;
            },

            displayPasswordFormChange(){
                this.displayPasswordForm = !this.displayPasswordForm;
            },

            changePassword(){

                this.initPublicKey();
                const data = {
                    oldPassword: this.encrypt.encrypt(this.passwordForm.oldPassword),
                    newPassword: this.encrypt.encrypt(this.passwordForm.newPassword)
                };
                service({
                    method: 'post',
                    url: '/user/changeCurrentPassword',
                    data: data
                }).then(res=>{
                    if(res.data){
                        this.$message({message:"密码修改成功,请重新登录",type:"success"})
                        setTimeout('logout()',1000);
                    }else{
                        this.$message({message:"密码修改失败",type:"warning"})
                    }
                })
            },
            initPublicKey(){
                this.encrypt = new JSEncrypt();
                this.encrypt.setPublicKey(storage.getItem("publicKey"))
            }
        },
        created(){
            this.getUserInfo();
        },
        mounted() {

        },
    })





</script>
</html>
